﻿<html>
<head>
<style type="text/css">
*{margin:0px; padding:0px;}
.linhaColuna
{
	background-color: black;
	color: white;
	border: 0px;
	letter-spacing:1px
}
div{
	width:100%;
}
.tblConfig
{	
	background:#282828;
	color: white;	
	border:1px solid #2D2D2D;
	margin:15px;
	padding: 25px;	
	-moz-border-radius:10px;
	-webkit-border-radius:10px;	
}

#containereditor, #containertelacodigo, #configuracao{clear:both;}
h4
{
	color:#99B3FF;
	font-size:110%;
	font-weight:bold;
	text-align: center;
	margin: 3px;
}
h1, h2
{
	color: white;
}
h2{ cursor:hand;}
body
{
	background: #232323;
	padding: 15px;
}
</style>
<script src="utils.js" language="javascript"></script>
<script src="jquery-1.3.2.min.js" language="javascript"></script>
<script src="utils.index.js" language="javascript"></script>

<script>
 $(document).ready(function(){
	//Associa os clicks aos lugares corretos
   $("#configuracaospan").click(function(event){
     $("#configuracao").slideToggle("slow");
   });
   
   $("#editorspan").click(function(event){
     $("#editor").slideToggle("slow");
   });
   
   $("#telacodigospan").click(function(event){
     $("#telacodigo").slideToggle("slow");
   });
   
   $("#btnGerarCodigo").click(function(event){
		document.getElementById("codigo").value = parseToCobol(tela);
   });
   
   
   	container = document.getElementById("tela");
	criaBtnsComSimbolos();
	
	$("#telacodigo").slideToggle("slow");
	$("#editor").slideToggle("slow");
    $("#configuracao").slideToggle("slow");
 });
</script>
</head>
<body>
<h1>GTC - Gerador de Telas COBOL</h1><br />
	
	<!-- ========== Painél de configuração ===============-->
	<div id="configuracaospan"><h2>Configurações</h2></div>
	<div id="configuracao">
		<table>
			<tr>
				<td>
					<table class="tblConfig">			
						<tr>
							<td colspan="2"><h4>Dimensões</h4></td>
						</tr>
						<tr>
							<td>Colunas: </td>
							<td><input type="text" name="txtQtdColunas" id="txtQtdColunas"></td>
						</tr>
						<tr>
							<td>Linhas: </td>
							<td><input type="text" name="txtQtdLinhas" id="txtQtdLinhas"></td>
						</tr>
						<tr>
							<td>Cor da tela: </td>
							<td>
								<select name="cmbCor" id="cmbCor">
									<option value="0black">Preta</option>
									<option value="1blue">Azul</option>
									<option value="2green">Verde</option>
									<option value="3cyan">Cyan</option>
									<option value="4red">Vermelho</option>
									<option value="5magenta">Magenta</option>
									<option value="6brown">Marrom</option>
									<option value="7white">Branco</option>
								</select>
							</td>
						</tr>
						<tr>
							<td colspan="2" align="center"><input type="button" value="Gerar tela" onclick="criarTela()" /></td>
						</tr>		
					</table>
				</td>
				
				<td>
					<table class="tblConfig">
						<tr>
							<td colspan="2"><h4>Minhas telas</h4></td>
						</tr>
						<tr>			
							<td >
								<select size="5">
								  <option value="volvo">Nenhuma tela</option>					  
								</select>
							</td>
						</tr>		
						<tr>			
							<td ><input type="button" onclick="alert('Ainda não implementado')" value="Gerer código completo'"/></td>
						</tr>	
					</table>
				</td>
			</tr>
		</table>
		
		
		
	</div>

	
	
	
	
	
	
	<!-- ========== Editor ===============-->	
	<div id="containereditor">
		<span id="editorspan"><h2>Editor</h2></span>
		<div id="editor">
			<table class="tblConfig" >
				<tr>
					<td><h4>Minha Interface</h4></td>
				</tr>
				<tr>
					<td>Nome da tela: <input type="text" name="txtNomeTela" id="txtNomeTela"></td>				
				</tr>
				<tr>
					<td>Alinhamentos: <input type="button" onclick="alinhar('CENTRO');" value="centro"></td>				
				</tr>
				<tr>
					<td>Símbolos especiais: <div id="simbolos" ></div></td>
				</tr>
				<tr>			
					<td >
						<div id="tela"></div>
					</td>
				</tr>
				<tr>
					<td><input type="button" id="btnGerarCodigo" value="Gerar código de tela em COBOL"/></td>
				</tr>			
			</table>
		</div>
	</div>	
	

	
	
	<!-- ========== Códigos ===============-->	
	<div id="containertelacodigo">
		<span id="telacodigospan"><h2>Código</h2></span>
		<div id="telacodigo">
			<table class="tblConfig">
				<tr>
					<td ><h4>Código</h4></td>
				</tr>
				<tr>			
					<td >
						<textarea id="codigo" cols="80" rows="15">Aqui ficará o código gerado
						</textarea>
					</td>
				</tr>	
				<tr>
					<td ><input type="button" onclick="alert('Ainda não implementado')" value="Salvar em 'Minhas telas'"/></td>
				</tr>			
			</table>
		</div>
	</div>

</body>
</html>